<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舒波作业day03</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- 整体盒子 -->
    <article id="main">
        <!-- 头部 -->
        <header>
            <!-- 左边文字区 -->
            <ul class="header_left">
                <li class="header_left_text">HOME</li>
                <li>ABOUT</li>
                <li>ARTICLES</li>
                <li>CONTACTS</li>
                <li>SITEMAP</li>
            </ul>
            <!-- 右边小图标区 -->
            <ul class="header_right">
                <li><img src="./images/pic-home-act.gif" alt=""></li>
                <li><img src="./images/pic-mail.gif" alt=""></li>
                <li><img src="./images/pic-sitemap.gif" alt=""></li>
            </ul>
        </header>
        <!-- logo部分 -->
        <nav>
            <img class="nav_logo" src="./images/logo.gif" alt="logo">
            <input type="text" class="nav_right">
            <img class="nav_soushuo" src="./images/button-search.gif" alt="soushuo">
        </nav>
        <!-- 房子部分 -->
        <article class="article_img">
            <!-- 左边房子图片 -->
            <section class="article_left_img">
                <img src="./images/slogan-bg.jpg" alt="左边房子图片">
                <!-- 房子右边的图片 -->
                <section class="article_right_img">
                    <img src="./images/slogan.gif" alt="房子右边的图片">
                </section>
                <!-- 最右边英文 -->
                <section class="article_right_text">
                    <!-- 右边上文字 -->
                    <section class="article_right_text_top">
                        <h3>Health Insurance</h3>
                        <p>Sed ut perspiciatis undomnis iste natus error</p>
                    </section>
                    <!-- 右边中文字 -->
                    <section class="article_right_text_mid">
                        <h3>Auto Insurance</h3>
                        <p>Nequeporo quisquam estqui dolorem ipsuquia dolor</p>
                    </section>
                    <!-- 右边下文字 -->
                    <section class="article_right_text_dowm">
                        <h3>Home Insurance</h3>
                        <p>Temporibus autem qubusdam et aut officiis </p>
                    </section>
                </section>
            </section>
        </article>
        <!-- 房子下方文字区域 -->
        <article class="article_mid_text">
            <section>
                <h2><span style="color:#f85820;">WELCOME</span> TO BIZSOLUTIONS!</h2>
                <p><b>BizSolutions</b> is a free web template created by TemplateMonster.com team. This website template is optimized for 1024X768 screen resolution and can be delivered in two packages - with PSD source files included and without them. It has several pages: Home, About, Articles (with Article page), Contacts (note that contact us form – doesn’t work), Site Map.</p>
            </section>
        </article>
        <!-- 文字下方区域 -->
        <article class="article_down_text">
            <!-- 左边区域 -->
            <section class="article_down_text_left">
                <header><h2>LATEST NEWS</h2></header>
                <aside>
                    <h4>24.08.2010</h4>
                    <p><a href="#">Sed ut perspiciatis unomnis </a>iste natus eirsot volup tatem accusantiuveniam, quis nostrud exercitation ullamco laboris .</p>
                </aside>
                <aside>
                    <h4>19.08.2010</h4>
                    <p><a href="#">Loremque laudantium</a>, totam aperiam eaque ipsa quae veniam, quis nostrud exercitation ullamco laboris ab illo inventore.</p>
                </aside>
                <aside>
                    <h4>24.08.2010</h4>
                    <p><a href="#"> Sed ut perspiciatis unomnis</a> iste natus eirsot volup tatem veniam, quis nostrud exercitation ullamco laboris accusantiu.</p>
                </aside>
            </section>
            <!-- 右边区域 -->
            <section class="article_down_text_right">
                <header><h2>RECENT ARTICLES</h2></header>
                <aside>
                    <h4>About Template</h4>
                    <p>Free 1028X768 Template from TemplateMonster.com! We hope that you like it.</p>
                    <img class="img1" src="./images/icon1.gif" alt="">
                </aside>
                <aside>
                    <h4>Services for You</h4>
                    <p>Sed ut perspiciatis unomnis iste natus error sit volup tatem accusantiu.</p>
                    <img class="img2" src="./images/icon2.png" alt="">
                </aside>
                <aside>
                    <h4>Health Insurance</h4>
                    <p>Loremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
                    <img class="img3" src="./images/icon3.gif" alt="">
                </aside>
            </section>
            <!-- 最右边文字 -->
            <div class="best_right_text">
                <ul>
                    <li class="li1"><h2><span style="color: #f85820;" >OUR</span> SERVICES</h2></li>
                    <li><a href="#">Sedut perspiciatis</a></li>
                    <li><a href="#">Unde omnisiste</a></li>
                    <li><a href="#">Natus errorsit voluptatem</a></li>
                    <li><a href="#">Accusantium</a></li>
                    <li><a href="#">Doloremque laudtium</a></li>
                    <li><a href="#">Totamrem aperiam</a></li>
                    <li><a href="#">Eaque ipsaquae</a></li>
                    <li><a href="#">Lnventore veritatis</a></li>
                    <li><a href="#">Quasi architecto betae</a></li>
                    <li><a href="#">Vitaedicta sunt</a></li>
                    <li><a href="#">Nemoenim ipsam</a></li>
                    <li><a href="#">Voluptatem quia</a></li>
                    <li><a href="#">Dluptas sit aspernatur</a></li>
                    <li><a href="#">Sedut perspiciatis</a></li>
                    <li><a href="#">Unde omnisiste</a></li>
                    <li><a href="#">Natus errorsit voluptatem</a></li>
                    <li><a href="#">Accusantium</a></li>
                    <li><a href="#">Doloremque laudtium</a></li>
                    <li><a href="#">Totamrem aperiam</a></li>
                    <li><a href="#">Eaque ipsaquae</a></li>
                    <li><a href="#">Lnventore veritatis</a></li>
                </ul>
                <span class="a1"><a href="#">More Services</a></span>
                
            </div>
        </ul>
        </article>
    </article>
    <!-- 底部 -->
    <footer>
        <p><a>Website template</a> designed by TemplateMonster.com</p>
        <p><a>3D Models</a> provided by Templates.com</p>
    </footer>
</body>
</html>